<template>
    <el-container >
        <el-footer height = "550px">
            <div class = "footer_box">
                <!-- 页脚第一行 -->
                <div class="box_intr">
                    <div class = "box_intr_left">
                        <h3>毕业旅游网</h3>
                        <p>中国年轻一代用得更多的旅游网站</p>
                        <p>上亿旅行者共同打造的<span>"旅行神器"</span></p>
                        <p><span>60,000 </span>多个全球旅游目的地</p>
                        <p><span>600,000 </span>个细分目的地新玩法</p>
                        <p><span>760,000,000 </span>次攻略下载</p>
                        <p><span>38,000 </span>家旅游产品供应商</p>
                    </div>
                    <div class = "box_intr_mid">
                        <h3>关于我们</h3>
                        <p><a href = "javascript:;">关于毕业旅游</a><a href = "javascript:;">联系我们</a></p>
                        <p><a href = "javascript:;">隐私政策</a><a href = "javascript:;">商标声明</a></p>
                        <p><a href = "javascript:;">服务协议</a></p>
                        <p><a href = "javascript:;">商城平台服务协议</a></p>
                        <p><a href = "javascript:;">网络信息侵权通知指引</a></p>
                        <p><a href = "javascript:;">毕业旅游网服务监督员</a></p>
                        <p><a href = "javascript:;">网站地图</a><a href = "javascript:;">加入毕业旅游</a></p>
                    </div>
                    <div class = "box_intr_right">
                        <h3>旅行服务</h3>
                        <p><a href = "javascript:;">旅游攻略</a><a href = "javascript:;">酒店预订</a></p>
                        <p><a href = "javascript:;">旅游特价</a><a href = "javascript:;">国际租车</a></p>
                        <p><a href = "javascript:;">旅游问答</a><a href = "javascript:;">旅游保险</a></p>
                        <p><a href = "javascript:;">旅游指南</a><a href = "javascript:;">订火车票</a></p>
                        <p><a href = "javascript:;">旅游资讯</a><a href = "javascript:;">APP下载</a></p>
                        <p><a href = "javascript:;">旅行商城全球商家入驻</a></p>
                    </div>
                    <div class = "box_intr_code">
                        <div class="code_item">
                            <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png" alt="">
                            <p>毕业旅游APP</p>
                            <p>扫描立即下载</p>
                        </div>
                        <div class="code_item">
                            <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png" alt="">
                            <p>毕业旅游旅游</p>
                            <p>订阅号</p>
                        </div>
                        <div class="code_item">
                            <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png" alt="">
                            <p>毕业旅游良品</p>
                            <p>官方服务号</p>
                        </div>
                    </div>

                </div>
                <!-- 页脚第二行 -->
                <div class="box_share">
                    <h2>旅游之前，先上毕业旅游！</h2>
                    <div class = "share_icon">
                        <a href = "javascript:;"><span class = "icon_sina"></span></a>
                        <a href = "javascript:;"><span class = "icon_qq"></span></a>
                        <a href = "javascript:;"><span class = "icon_qzone"></span></a>
                    </div>
                </div>
                <!-- 页脚第三行 -->
                <div class="box_iden">
                    <div class = "identity_intr">
                        <div class="logo"><img src="../assets/logo1.png" alt=""></div>
                        <p>
                            <span>© 2021 Mafengwo.cn</span>
                            <a href = "javascript:;">京ICP备11015476号</a>
                            <span class = "police_icon"> <img src="https://images.mafengwo.net/images/footer/police_record.png" alt=""> </span>
                            <a href = "javascript:;">京公网安备11010502013401号</a>
                            <a href = "javascript:;">京ICP证110318号</a>
                        </p>
                        <p class = "license">
                            <a href = "javascript:;">网络出版服务许可证</a>
                            <a href = "javascript:;">增值电信业务经营许可证</a>
                            <a href = "javascript:;">营业执照</a>
                            <a href = "javascript:;">广播电视节目制作经营许可证</a>
                            <a href = "javascript:;">网上有害信息举报专区</a>
                            <a href = "javascript:;">帮助中心</a>
                        </p>
                        <p>违法和不良信息举报电话: 010-83416877 举报邮箱: mfwjubao@mafengwo.com 全国旅游投诉电话：12301</p>
                        <p>毕业旅游客服：国内<span>4006-345-678</span> 海外 <span>+86-10-8341-6888</span></p>
                    </div>
                    <div class = "idnetity_icon">
                        <div class="icon_item1"></div>
                        <div class="icon_item2"></div>
                        <div class="icon_item3"></div>

                    </div>
                </div>
            </div>
        </el-footer>
    </el-container>
    
</template>
<style lang = "scss" scoped>
    .el-footer {
        width: 100%;
        min-width: 1200px;
        font-size: 12px;
        color: #c2c2c2;
        background: #3c3c3c;
        overflow: hidden;
        .footer_box {
            width: 1100px;
            height: 510px;
            margin: 0 auto;
            /* 页脚第一行样式 */
            .box_intr {
                width: 100%;
                margin-top: 40px;
                overflow: hidden;
                h3 {
                    margin-bottom: 12px;
                }
                .box_intr_left {
                    float: left;
                    width: 200px;
                    p {
                        margin-top: 8px;
                    }
                    span {
                        color: #41c1ec;
                    }
                }
                .box_intr_mid {
                    margin-left: 70px;
                    margin-right: 70px;
                    float: left;
                    p {
                        margin-top: 8px;
                        a {
                            color: #c2c2c2;
                            text-decoration: none;
                            margin-right: 10px;
                        }
                        a:hover {
                            color: #fff;
                        }
                    }
                    p:last-child a:last-child {
                        color: #41c1ec;
                    }
                }
                .box_intr_right { 
                    float: left;
                    p {
                        margin-top: 8px;
                        a {
                            color: #c2c2c2;
                            text-decoration: none;
                            margin-right: 10px;
                        }
                        a:hover {
                            color: #fff;
                        }
                    }
                    p:last-child a:last-child {
                        color:#41c1ec;
                    }
                }
                .box_intr_code {
                    float: left;
                    margin-left: 80px;
                    margin-top: 22px;
                    overflow: hidden;
                    .code_item {
                        float: left;
                        width: 90px;
                        text-align: center;
                        margin-left: 46px;
                        img {
                            width: 100%;
                            margin-bottom: 5px;
                        }
                    }
                }
            } 
            /* 页脚第二行 */
            .box_share {
                text-align: center;
                margin-top: 30px;
                h2 {
                    font-weight: normal;
                    margin-bottom: 10px;
                }
                .share_icon {
                    width: 133PX;
                    margin: 0 auto;
                    span {
                        display: inline-block;
                        width: 28px;
                        height: 28px;
                        margin: 0 5px;
                    }
                    .icon_sina {
                        background: url("../assets/footer_icon/footer_icon.png") no-repeat;
                    }
                    .icon_qq {
                        background: url("../assets/footer_icon/footer_icon.png") no-repeat -30px 0;

                    }
                    .icon_qzone {
                        background: url("../assets/footer_icon/footer_icon.png") no-repeat -60px 0;

                    }

                }
            }  
            /* 页脚第三行 */
            .box_iden {
                margin-top: 50px;
                border-top: 1px solid #575a5b;
                .identity_intr {
                    padding-top: 20px;
                    height: 104px;
                    .logo {
                        width: 135px;
                        height: 50px;
                        float: left;
                        margin-right: 20px;
                        img{width:100%;}
                    }
                    p {
                        margin-left: 10px;
                        margin-bottom: 8px;
                        a {
                            color: #c2c2c2;
                            text-decoration: none;
                        }
                        a:hover {
                            color: #fff;
                        }
                        .police_icon {
                            /* display: inline-block; */
                            width: 12px;
                            height: 12px;
                            img {
                                width: 12px;
                            }
                        }
                    }
                    .license {
                        margin: 5px 0;
                        a {
                            margin-left: 5px;
                        }
                    }
                    p:last-child {
                            span {
                                color:#41c1ec;
                            }
                        }
                }
                .idnetity_icon {
                    width: 300px;
                    height: 30px;
                    margin: 0 auto;
                    /* background: aqua; */
                    div {
                        float: left;
                        width: 90px;
                        height: 30px;
                        margin: 0 5px;
                    }
                    .icon_item1 {
                        background: url("../assets/footer_icon/footer_icon.png") no-repeat 0 -69px;

                    }
                    .icon_item2 {
                        background: url("../assets/footer_icon/footer_icon.png") no-repeat 0 -110px;

                    }.icon_item3 {
                        background: url("../assets/footer_icon/footer_icon.png") no-repeat 0 -150px;

                    }
                }
            }
        }
    } 
    
</style>